<!DOCTYPE html>
<html style="overflow:visible">
	<head>
		<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>试听音乐</title>
		<link rel="stylesheet" href="/svs/static/js/notReleaseMusicManage/webLayout.css" />
		<script src="/svs/static/js/notReleaseMusicManage/less.min.js"></script>
		<script src="/svs/static/js/notReleaseMusicManage/song.js"></script>
		<script src="/svs/static/js/jquery-1.8.3.min.js"></script>
	</head>
	<body style="width:400px;height:730px;overflow-x:visible;">
		<div id="qqMain">
			<!--音乐-->
			<audio src="" id="my_audio" flag="1"></audio>
			<!--cd播放机-->
			<div class="img">
				<img id="pic_path" src=""/>
				<span class="centerCircle"></span>
			</div>
			<!--音频名字-->
			<div class="musicName">
				<span id='mName'></span><br/>
				<span id='pName'></span>
			</div>
			<div class="MV">
				<a id="video" href="javascript:;" style="cursor:pointer;text-decoration:none;margin-right: 10px;" target="_blank" >MV</a>
				<a id="timbre" style="cursor:pointer">标准</a>
			</div>
			
			<!--歌词-->
			<div id="musicContent" style="overflow-y:visible" >
				<span class="musicContent01"></span>
				<span class="musicContent02"></span>
				<span class="musicContent03"></span>
			</div>
			<div class="time">
				<!--当前时间-->
			    <span class="now_time" id="now_time">00:00</span>
			    <!--总的时间-->
			    <span class="all_time" id="all_time">00:00</span>
			</div>
			<!--时间轴-->
			<div class="time_progress" id="time_progress">
				<div class="progress" id="progress">
			    	<p class="bar" id="bar"></p>
			        <div class="btn" id="btn" style="width: 400px;" draggable="true"></div>
			    </div>
			</div>
			<!--暂停或播放-->
			<div class="btnpic" item="0"></div>
		</div>

<script type="text/javascript">
	//var beifen = '[00:01.92]匆匆年（电影《匆匆那年》同名主题曲）- 王菲\n[00:28.21]匆匆那年 我们究竟说了几遍\n[00:31.17]再见之后 再拖延\n[00:33.89]可惜谁有没有 爱过不是一场\n[00:36.85]七情上面的雄辩\n[00:39.57]匆匆那年我们 一时匆忙撂下\n[00:42.42]难以承受的诺言\n[00:45.15]只有等别人兑现\n[00:51.00]不怪那吻痕 还没积累成茧\n[00:56.41]拥抱着冬眠 也没能羽化再成仙\n[01:02.01]不怪这一段情没空反复再排练\n[01:07.56]是岁月宽容恩赐 反悔的时间\n[01:18.57]如果再见不能红着眼 是否还能红着脸\n[01:24.49]就像那年匆促刻下\n[01:26.54]永远一起那样美丽的谣言\n[01:29.73]如果过去还值得眷恋 别太快冰释前嫌\n[01:35.78]谁甘心就这样 彼此无挂也无牵\n[01:41.49]我们要互相亏欠 要不然凭何怀缅\n[01:58.26]匆匆那年 我们见过太少世面\n[02:01.22]只爱看同一张脸\n[02:03.93]那么莫名其妙 那么讨人欢喜\n[02:06.78]闹起来又太讨厌\n[02:09.41]相爱那年活该匆匆\n[02:11.47]因为我们不懂顽固的诺言\n[02:15.10]只是分手的前言\n[02:20.96]不怪那天太冷 泪滴水成冰\n[02:26.42]春风也一样没吹进凝固的照片\n[02:31.99]不怪每一个人没能完整爱一遍\n[02:37.69]是岁月善意落下 残缺的悬念\n[02:48.41]如果再见不能红着眼 是否还能红着脸\n[02:54.56]就像那年匆促刻下\n[02:56.51]永远一起那样美丽的谣言\n[02:59.43]如果过去还值得眷恋 别太快冰释前嫌\n[03:05.76]谁甘心就这样 彼此无挂也无牵\n[03:10.66]如果再见不能红着眼 是否还能红着脸\n[03:17.00]就像那年匆促刻下\n[03:19.00]永远一起那样美丽的谣言\n[03:21.87]如果过去还值得眷恋 别太快冰释前嫌\n[03:28.25]谁甘心就这样 彼此无挂也无牵\n[03:33.96]我们要互相亏欠 我们要藕断丝连'
	var songContent = '';
	var music_reduce_path = '';
	var afterUrl = decodeURI(window.location.search).substring(1);//(问号以后的字符串)
	var parameter = afterUrl.split("musicBeanDT=")[1];
	var data = $.parseJSON(parameter);
	//console.log(data);
/* 	if(data.music_path2 != null ){
		$('#my_audio').attr('src',data.music_path2);
	}else{
		$('#my_audio').attr('src',data.music_reduce_path2);
	} */
	$('#my_audio').attr('src',data.music_reduce_path2);
	if(typeof(data.songContent)=="undefined" || data.songContent == ''){
		songContent = '[00:01.92]';
	}else{
		songContent = data.songContent;	
	}
	if(data.pic_path2 != ''){
		$('#pic_path').attr('src',"/svs"+data.pic_path2);
	}
	if(data.mv_url2 != null && data.mv_url2 != '' ){
		$('#video').attr('href',data.mv_url2)
	}else{
		$('#video').hide();
	}
	if(data.music_path2 != null && data.music_path2 != ''){
		music_reduce_path = data.music_path2;
	} 
	$('#mName').html(data.music_name2);
	$('#pName').html("——"+data.sing_personnel2+"——");
	var p_all=$(".progress").width();
	var startX = startY = endX = endY = 0;  
	//暂停或播放
	function playPause()
	{ 
		if(my_audio.paused)
			{
				my_audio.play();
				$(".img img").addClass("rainbow");
			}
			else
			{
				my_audio.pause();
				$(".img img").removeClass("rainbow");
			}	  
	}
	
	$(".btnpic").click(function(){
		if($(this).attr("item")=="0"){
			$(this).css("background-position","280px 0");
			$(this).attr("item","1");
		}else{
			$(this).css("background-position","0 0");
			$(this).attr("item","0");
		}
		
		playPause();
	});
	
  	//切换音质
	$("#timbre").click(function(){
		if(music_reduce_path == ''){
			return false;
		}
		var audio=document.getElementById("my_audio");
		//播放进度
		var currentTime = audio.currentTime;
		var flag = $('#my_audio').attr("flag");
		
		//my_audio src重新赋值
		if(flag == "1"){
			$("#timbre").text('高品质');
			$("#my_audio").attr("src","/svs"+music_reduce_path);
			$('#my_audio').attr("flag","");
		}else {
			$("#timbre").text('标准');
			$("#my_audio").attr("src","/svs"+data.music_reduce_path2);
			$('#my_audio').attr("flag","1");
		}
		
		
		if(currentTime>0){
			//暂停当前播放
			audio.pause();
			audio.currentTime = currentTime;
			audio.play();
		}
		
	});  
	
	var lyric = parseLyric(songContent);
	//显示歌词的元素
	lyricContainer = document.getElementById('musicContent');
	//audio播放的时候实时获取当前播放时间
	my_audio.ontimeupdate = function()
	{		
		//获取当前播放时间
		document.getElementById("now_time").innerHTML = timeFormat(my_audio.currentTime);
		//当前的长度
		now_long=my_audio.currentTime/my_audio.duration*p_all;
		$(".bar").css({width:now_long});
		var btn_l=now_long+'px';
		$(".btn").css({left:btn_l});
		//遍历所有歌词，看哪句歌词的时间与当然时间吻合
	    for (var i = 0, l = lyric.length; i < l; i++) {
	    	if(lyric.length == 1){
	    		addListenTouch();
	    		continue;
	    	}
	        if (this.currentTime /*当前播放的时间*/ > lyric[i][0]) {
	            //显示到页面
				if(i>=1){
					$(".musicContent01").html(lyric[i-1][1]);
		            $(".musicContent02").html(lyric[i][1]);
		            $(".musicContent03").html(lyric[i+1][1]);
				}else{
		            $(".musicContent02").html(lyric[i][1]);
		            $(".musicContent03").html(lyric[i+1][1]);
				}
	        };
    	};
       	addListenTouch();
	};
	
 	//页面一旦加入就获取audio的总时间
	my_audio.oncanplay = function()
	{
		document.getElementById("all_time").innerHTML = timeFormat(my_audio.duration);
	};	 
	// Time format converter - 00:00//时间格式转换器- 00:00
	var timeFormat = function(seconds){
		var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
		var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
		return m+":"+s;
	};	
	
	//手动拉拽进度条的部分
	function addListenTouch(){
		var btn=document.getElementById("btn");
		document.getElementById("btn").addEventListener("ondragstart ", ondragstart , false);
		document.getElementById("btn").addEventListener("ondragmove", ondragmove, false);
		document.getElementById("btn").addEventListener("ondragend ", ondragend , false);
		document.getElementById("musicContent").addEventListener("ondragstart ", ondragstart , false);
		document.getElementById("musicContent").addEventListener("ondragmove", ondragmove, false);
		document.getElementById("musicContent").addEventListener("ondragend ", ondragend , false);
	}
	
	function ondragstart(e){
		e.preventDefault();
		var touch=e.touches[0];
		startX=touch.pageX;
		my_audio.pause();
		document.getElementById("all_time").innerHTML = timeFormat(my_audio.duration);	
		//歌词区域touch移动距离
		var touchSong = e.targetTouches[0];
        startSongX = touchSong.pageX;
        startSongY = touchSong.pageY;
	}
	
	//滑动
	function ondragmove(e){
		e.preventDefault();
		var touch=e.touches[0];
		x=touch.pageX-startX//滑动的距离
		var widthBar=now_long+x;
		//
		$(".bar").css({width:widthBar});
		if(widthBar<p_all)
			{
			//	
			$("#btn").css({left:widthBar-10+'px'});
			$("#bar").css({width:widthBar});	
			}//不让进度条超出页面
		//歌词区域touch移动距离
		var touchSong = e.targetTouches[0];
        endSongX = touchSong.pageX;
        endSongY = touchSong.pageY;
       
		var yu=widthBar/p_all*my_audio.duration;
		document.getElementById("now_time").innerHTML = timeFormat(yu);
	}
	
	//手指离开屏幕
	function ondragend(e){
		e.preventDefault();//取消事件的默认动作
		now_long=parseInt(btn.style.left);
		var touch=e.touches[0];
		var dragPaddingLeft=btn.style.left;
		var change=dragPaddingLeft.replace("px","");
		numDragpaddingLeft=parseInt(change);
		//console.log(numDragpaddingLeft);
		var currentTimeNew=(numDragpaddingLeft/(p_all-20)*my_audio.duration);
		my_audio.currentTime = currentTimeNew;
		//console.log(currentTimeNew);
		//console.log(timeFormat(currentTimeNew));
		document.getElementById("now_time").innerHTML = timeFormat(currentTimeNew);
		my_audio.play();
		document.getElementById("all_time").innerHTML = timeFormat(my_audio.duration);	
		console.log("垂直移动距离=    "+(endSongY-startSongY));
	}	
	
	var silider = document.getElementById("time_progress");
	var progress = document.getElementById("progress");
	silider.addEventListener('click',function (e) {
		//e.target 就是触发这次事件的dom元素        // document.getElementById("btn");
		//e.currentTarget 就是触发这次事件的冒泡到最上层dom元素    // document.getElementById("time_progress") == this;
		//e.preventDefault() 就是阻止默认事件等等
        var setW=e.clientX-this.offsetLeft;
        var maxW=silider.offsetWidth;
        if(setW>=0&&setW<=maxW){
            var percen=setW/maxW;
            var per=setW/maxW*100;
            progress.style.width=`${per}%`;
            upDateProgress(percen)
        }
    })
	
    //更改进度条
    function upDateProgress(percence) {
		var audio = document.getElementById("my_audio");
        audio.currentTime = percence*audio.duration;
    }
	
	var audio = document.getElementById("my_audio");
	//关闭音频循环播放
	audio.loop = false;
	audio.addEventListener('ended', function () { 
		//自动触发click事件
		var e = document.createEvent("MouseEvents");
	    e.initEvent("click", true, true);
	    //document.getElementById("btnpic").dispatchEvent(e);
	    playPause();
	}, false);
	</script>
	</body>	
</html>
